<template>
  <div class="doctorreviewreview">
    <Row class="box">
      <!--左侧信息-->
      <i-col span="11" class="main">
        <!--订单信息：-->
        <i-col>
          <div>
            <p class="title">基本信息</p>
          </div>
          <div class="lista">
            <p>订单编号&nbsp;:&nbsp;{{ info.orderNumber || "暂无" }}</p>
            <p>创建时间&nbsp;:&nbsp;{{ info.createTime || "暂无" }}</p>
            <p>订单类型&nbsp;:&nbsp;{{ info.inqConTypeName || "暂无" }}</p>
            <p>问诊类型&nbsp;:&nbsp;{{ info.inquiryType || "暂无" }}</p>
            <p
              v-if="
                info.refundOrderStatus != 0 &&
                info.refundOrderStatus != 1 &&
                (info.status == 1 || info.status == 2)
              "
            >
              接诊时间&nbsp;:&nbsp;{{ info.jzTime || "暂无" }}
            </p>
            <p>结诊时间&nbsp;:&nbsp;{{ info.completeDate || "暂无" }}</p>
            <p>问诊时长&nbsp;:&nbsp;{{ timelang || "暂无" }}</p>
            <div class="starall">
              患者评价&nbsp;:&nbsp;
              <span v-if="info.starLevel == null || info.starLevel == ''"
                >暂无评价</span
              >
              <img
                src="../../../assets/images/star1.png"
                alt=""
                v-if="info.starLevel == 1"
              />
              <img
                src="../../../assets/images/star2.png"
                alt=""
                v-if="info.starLevel == 2"
              />
              <img
                src="../../../assets/images/star3.png"
                alt=""
                v-if="info.starLevel == 3"
              />
              <img
                src="../../../assets/images/star4.png"
                alt=""
                v-if="info.starLevel == 4"
              />
              <img
                src="../../../assets/images/star_5.png"
                alt=""
                v-if="info.starLevel == 5"
              />
              <p>{{ info.lableTitle }}</p>
              <p class="kongtit">{{ info.evaluate || "" }}</p>
            </div>
          </div>
        </i-col>
        <br />
        <!--患者信息：-->
        <i-col>
          <div>
            <p class="title">患者信息</p>
          </div>
          <div class="lista">
            <p>姓名&nbsp;:&nbsp;{{ info.memberName || "暂无" }}&nbsp;&nbsp;</p>
            <p>性别&nbsp;:&nbsp;{{ info.gender || "暂无" }}</p>
            <p>出生日期&nbsp;:&nbsp;{{ info.birth || "暂无" }}</p>
            <p>民族&nbsp;:&nbsp;{{ info.ethnictype || "暂无" }}&nbsp;&nbsp;</p>
            <!-- <p>籍贯&nbsp;:&nbsp;{{info.hometown || '暂无'}}</p> -->
            <p>联系电话&nbsp;:&nbsp;{{ info.phonenumber || "暂无" }}</p>
            <!-- <p>证件类型&nbsp;:&nbsp;</p> -->
            <p>证件号码&nbsp;:&nbsp;{{ info.idcard || "暂无" }}</p>
            <!-- <p>户籍地址&nbsp;:&nbsp;{{info.hometown || '暂无'}}</p> -->
            <!-- <p>微信昵称&nbsp;:&nbsp;{{info.nickname || '暂无'}}</p>
                            <p>来源渠道&nbsp;:&nbsp;{{info.wxappSource || '暂无'}}</p> -->
          </div>
        </i-col>
        <br />
        <!--医生信息：-->
        <i-col>
          <div>
            <p class="title">医生信息</p>
          </div>
          <div class="lista">
            <p>
              接诊医生&nbsp;:&nbsp;{{
                info.doctorName || "暂无"
              }}&nbsp;&nbsp;&nbsp;{{ info.doctorTitle || "暂无" }}
            </p>
            <p>接诊科室&nbsp;:&nbsp;{{ info.deptTypeName || "暂无" }}</p>
            <p>接诊机构&nbsp;:&nbsp;{{ info.hospitalname || "暂无" }}</p>
            <p>医生擅长&nbsp;:&nbsp;{{ info.doctorGood || "暂无" }}</p>
          </div>
        </i-col>
        <br />
        <template v-if="type === 'feeBack'">
          <!-- 只要发起退款就有 -->
          <!-- <i-col>
                            <div>
                                <p class="title">用户申诉</p>
                            </div>       
                            <div class="lista">
                                <p>{{info.refundReason}}</p>
                                <p>申诉时间&nbsp;:&nbsp;{{info.refundCreateTime}}</p>
                            </div>
                        </i-col> -->
          <br />
          <!-- 已退款/拒绝退款/同意退款 -->
          <i-col v-if="[1, 2, 3, 4].indexOf(info.refundOrderStatus) > -1">
            <div>
              <p class="title">退诊信息</p>
            </div>
            <div class="lista">
              <p>
                退诊状态:&nbsp;{{
                  ["申请中", "已退款", "拒绝退款", "退款中", "同意退款"][
                    info.refundOrderStatus
                  ]
                }}
              </p>
              <p>退诊金额:&nbsp;{{ info.refundAmt }}</p>
              <p v-if="info.refundAuditorReason">
                驳回理由:&nbsp;{{ info.refundAuditorReason }}
              </p>
              <p>审核时间:&nbsp;{{ info.refundAuditorTime }}</p>
            </div>
          </i-col>
        </template>
      </i-col>
      <!--右侧信息-->
      <i-col span="12">
        <Row>
          <i-col span="24">
            <div class="tit">
              订单当前状态&nbsp;:&nbsp;{{ genCurStatus() || "暂无" }}
            </div>
            <div class="bor">
              <div
                style="
                  width: 100%;
                  height: 20px;
                  margin-top: 20px;
                  text-align: center;
                "
                @click="getWxChatPage"
              >
                ---------------------加载更多---------------------
              </div>
              <!-- <scroller class="main-scroller" :on-refresh="refresh" refreshText="下拉加载" ref="my_scroller" style="z-index:1;"> -->
              <div
                class="main-content"
                :style="{ paddingBottom: pddBtm + 'px' }"
                ref="main-content"
              >
                <wx-chat-list
                  type="session"
                  :historyMsgList="historyMsgList"
                  :servertype="servertype"
                  @showOpinionEvent="showOpinnion"
                  @loadMore="getWxChatPage"
                ></wx-chat-list>
              </div>
              <!-- </scroller> -->
            </div>
          </i-col>
        </Row>
      </i-col>
    </Row>
    <Row style="text-align: center; margintop: 20px">
      <feeBackBtn
        v-if="numtype != 1"
        :id="$route.query.id"
        :feeBackInfo="{
          refundAmt: info.refundAmt,
          refundTradingChannels: info.refundTradingChannels,
          refundOrderStatus: info.refundOrderStatus,
        }"
      />
      <Button @click="handleBack" class="btn">
        <i
          class="iconfont icon-butongyi"
          style="font-size: 14px; margin-right: 5px"
        ></i
        >关闭
      </Button>
      <Button
        type="primary"
        @click="inqBadClick(1)"
        v-if="numtype == 1"
        class="btn"
      >
        <i
          class="iconfont icon-butongyi"
          style="font-size: 14px; margin-right: 5px"
        ></i
        >不良事件填报
      </Button>
      <Button
        type="primary"
        @click="inqBadClick(2)"
        v-if="numtype == 1"
        class="btn"
      >
        <i
          class="iconfont icon-butongyi"
          style="font-size: 14px; margin-right: 5px"
        ></i
        >患者投诉填报
      </Button>
      <Button type="primary" @click="drawerValue = true" class="btn">
        <i
          class="iconfont icon-butongyi"
          style="font-size: 14px; margin-right: 5px"
        ></i
        >音视频列表
      </Button>
    </Row>
    <Modal
      :title="inqBadTitle"
      footer-hide="true"
      :loading="loading"
      @on-cancel="cancel"
      v-model="inqBadStatus"
      class="shenhe-vertical-center-modal"
    >
      <Row>
        <Col :xs="24" :mb="4">
          <i
            class="req-icon"
            style="
              font-size: 18px;
              text-align: center;
              color: red;
              display: inline-block;
              height: 18px;
              width: 18px;
              line-height: 18px;
              vertical-align: middle;
            "
            >*</i
          >{{ inqBadTitle }}&nbsp;&nbsp;
        </Col>
        <Col :xs="24" :mb="20">
          <Form ref="formValue" :model="inqBadMag" :rules="ruleValue">
            <FormItem prop="content">
              <Input
                class
                :autosize="{ minRows: 3, maxRows: 3 }"
                type="textarea"
                v-model="inqBadMag.content"
                :placeholder="inqBadTitle"
                maxlength="2000"
              />
            </FormItem>
          </Form>
        </Col>
      </Row>
      <div class="btn-group" style="text-align: center; paddingtop: 20px">
        <Button
          type="primary"
          :loading="loading"
          style="marginleft: 20px"
          @click="delInqBad()"
          class="btn"
        >
          <Icon type="ios-checkmark" style="margin-right: 5px" />删除
        </Button>
        <Button
          type="primary"
          :loading="loading"
          style="marginleft: 20px"
          @click="submitInqBad('formValue')"
          class="btn"
        >
          <Icon type="ios-checkmark" style="margin-right: 5px" />确认
        </Button>
        <Button style="marginleft: 20px" @click="cancel" class="btn">
          <i
            class="iconfont icon-butongyi"
            style="font-size: 14px; margin-right: 5px"
          ></i
          >返回
        </Button>
      </div>
    </Modal>
    <Drawer
      title="音视频记录"
      :closable="false"
      width="500"
      v-model="drawerValue"
    >
      <Table border :columns="columns12" :data="avList">
        <template slot-scope="{ row }" slot="action">
          <Button type="primary" size="small" @click="checkVideo(row)"
            >查看</Button
          >
        </template>
      </Table>
    </Drawer>
    <div class="videoBox" v-show="videoShow">
      <div class="top">
        <i>音视频记录</i>
        <Button
          type="text"
          style="padding: 0px 5px; color: #919399"
          @click="pauseVideo"
          >X</Button
        >
      </div>
      <div>
        <video ref="videoPlayer" width="500" height="715" controls>
          <source :src="avPath" type="video/mp4" />
          您的浏览器不支持 HTML5 视频标签。
        </video>
      </div>
    </div>
  </div>
</template>
<script>
import api from "@/api/commonApi";
import wxChatList from "@/components/wxChatList";
import feeBackBtn from "@/pages/orders/feedBackMgt/components/feeBackBtn";
export default {
  components: {
    wxChatList,
    feeBackBtn,
  },
  props: {
    serviceId: [Number, String],
    servertype: [Number, String],
    orderNumber: [Number, String],
    type: {
      type: String,
      default: "", // feeBack 为退费
    },
    numtype: [Number, String],
  },
  data() {
    return {
      videoShow: false,
      avPath: "",
      columns12: [
        {
          title: "时间",
          key: "videoCreateTime",
        },
        {
          title: "类型",
          key: "videoType",
        },
        {
          title: "操作",
          slot: "action",
        },
      ],
      avList: [],
      drawerValue: false,
      inqBadType: null,
      inqBadTitle: "",
      inqBadStatus: false,
      inqBadMag: {
        content: null,
        id: null,
      },
      content: "",
      ruleValue: {
        content: [
          {
            required: true,
            message: "填报信息不能为空",
            trigger: "blur",
          },
        ],
      },
      info: {},
      timelang: "",
      histNo: 0,
      pageNo: 0,
      pageSize: 10,
      casePic: [{ fileName: require("@/assets/images/weixiaobao.jpg") }],
      modalSrc: "",
      searchKey: "",
      startDate: "",
      endDate: "",
      status: null,
      province: null,
      city: null,
      area: null,
      hospital: null,
      isBack: 2,
      historyMsgList: [],
      // 处理申请相关
      orderStatusList: [
        { dictName: "申请中", dictValue: 0 },
        { dictName: "已退款", dictValue: 1 },
        { dictName: "拒绝退款", dictValue: 2 },
        { dictName: "退款中", dictValue: 3 },
        { dictName: "同意退款", dictValue: 4 },
      ],
    };
  },
  created() {
    const reqBody = {};
    if (this.type === "feeBack") {
      reqBody.orderNumber = this.orderNumber;
    } else {
      reqBody.serviceId = this.id;
    }
    //查询就诊记录详情
    this.$axios
      .post(api.findWxInqConDetailByid, reqBody)
      .then((resp) => {
        this.info = resp.data.object || {};
        console.log("咨询详情", this.info);
        //性别
        if (this.info.gender == 1) {
          this.info.gender = "男";
        } else if (this.info.gender == 2) {
          this.info.gender = "女";
        } else if (this.info.gender == 9) {
          this.info.gender = "其他";
        }
        if (this.info.status == -1) {
          this.info.complete = "待支付";
        } else if (this.info.status == 0) {
          this.info.complete = "待接诊";
          this.info.completeDate = "暂无";
          this.timelang = "暂无";
        } else if (this.info.status == 1) {
          this.info.complete = "就诊中";
        } else if (this.info.status == 2) {
          this.info.complete = "已完成";
        } else if (this.info.status == 3) {
          this.info.complete = "拒接接诊";
        } else if (this.info.status == 4) {
          this.info.complete = "爽约";
        } else if (this.info.status == 5) {
          this.info.complete = "已取消";
        }
        //问诊类型
        if (this.info.inquiryType == 0) {
          this.info.inquiryType = "图文";
        } else if (this.info.inquiryType == 1) {
          this.info.inquiryType = "语音";
        } else if (this.info.inquiryType == 2) {
          this.info.inquiryType = "视频";
        }
        //订单类型
        if (this.info.inqConType == 0) {
          this.info.inqConTypeName = "咨询";
        } else if (this.info.inqConType == 1) {
          this.info.inqConTypeName = "问诊";
        } else if (this.info.inqConType == 2) {
          this.info.inqConTypeName = "复诊";
        } else if (this.info.inqConType == 3) {
          this.info.inqConTypeName = "续方";
        } else if (this.info.inqConType == 4) {
          this.info.inqConTypeName = "药品咨询";
        }
        // //民族
        // if(this.info.ethnictype == '01'){
        //     this.info.ethnictype = '汉族'
        // }
        if (this.info.birth) {
          this.info.birth = this.info.birth.substr(0, 10);
        }
        this.SecondToDate(this.info.jzOften);
      })
      .catch((err) => {
        // this.$Message.info("服务器超时，请重新访问")
      });
    this.gethistydata();
    this.getAVlist();
  },
  computed: {
    id() {
      return this.serviceId;
    },
  },
  methods: {
    // 获取视频列表
    getAVlist() {
      this.$axios
        .post(api.findVideoRecording, { serviceId: this.id })
        .then((res) => {
          console.log("dddd", res);
          this.avList = res.data.object;
        });
    },
    // 查看视频
    checkVideo(row) {
      this.avPath = process.env.VUE_APP_AV + row.videoPath;
      this.$refs.videoPlayer.play();
      this.videoShow = true;
    },
    // 关闭并暂停视频
    pauseVideo() {
      this.$refs.videoPlayer.pause();
      this.videoShow = false;
    },
    handleBack() {
      this.$router.back(-1);
    },
    genCurStatus() {
      const { status } = this.info;
      // if (this.type === 'feeBack') {
      if (status == -1) {
        return "待支付";
      } else if (status == 0) {
        return "待接诊";
      } else if (status == 1) {
        return "就诊中";
      } else if (status == 2) {
        return "已完成";
      } else if (status == 3) {
        return "拒绝接诊";
      } else if (status == 4) {
        return "爽约";
      } else if (status == 5) {
        return "已取消";
      }
      // } else {
      //     return false;
      // }
    },
    //下拉加载
    refresh() {
      this.getWxChatPage();
    },
    //根据服务id获取就诊聊天记录详情
    gethistydata() {
      let data = {
        pageNo: 1,
        pageSize: this.pageSize,
        // chatId: this.chatId
      };
      if (this.type === "feeBack") {
        data.orderNumber = this.orderNumber;
      } else {
        data.serviceId = this.id;
      }
      this.$axios
        .post(api.findWxChatPage, data)
        .then((res) => {
          let resObj = res.data.object;
          if (resObj.records && resObj.records.length > 0) {
            this.historyMsgList = [...resObj.records];
            this.histNo = resObj.current;
            this.pageSize = resObj.size;
            this.chatId = resObj.records[resObj.records.length - 1]["id"];
          }
          this.ishistory = true;
          console.log("聊天记录", resObj);
        })
        .catch((err) => {
          console.log(err);
        });
    },
    getWxChatPage() {
      let data = {
        pageNo: this.histNo + 1,
        pageSize: this.pageSize,
        // chatId: this.chatId
      };
      if (this.type === "feeBack") {
        data.orderNumber = this.orderNumber;
      } else {
        data.serviceId = this.id;
      }
      this.$axios
        .post(api.findWxChatPage, data)
        .then((resp) => {
          let resObj = resp.data.object;
          if (resObj.records && resObj.records.length > 0) {
            this.historyMsgList = [...resObj.records, ...this.historyMsgList];
            this.histNo = resObj.current;
            this.pageSize = resObj.size;
            this.chatId = resObj.records[resObj.records.length - 1]["id"];
            // this.$refs.my_scroller.finishPullToRefresh();
            this.$Message.success("聊天记录加载成功");
          } else {
            this.$Message.info("无更多聊天记录");
            // this.$refs.my_scroller.finishPullToRefresh(true);
          }
          this.ishistory = true;
        })
        .catch((err) => {
          // this.$refs.my_scroller.finishPullToRefresh();
          this.$Message.error("聊天记录加载失败");
        });
    },
    //滚动到底部
    scrollToBtm() {
      setTimeout(() => {
        let height =
          window.document.getElementsByClassName("main-content")[0]
            .offsetHeight;
        if (this.$refs.my_scroller) {
          this.$refs.my_scroller.scrollTo(0, height, true);
        }
      }, 0);
    },
    // 时间转换
    SecondToDate(jzOften) {
      var time = jzOften;
      if (null != time && "" != time) {
        if (time > 60 && time < 60 * 60) {
          time =
            parseInt(time / 60.0) +
            "分钟" +
            parseInt((parseFloat(time / 60.0) - parseInt(time / 60.0)) * 60) +
            "秒";
        } else if (time >= 60 * 60 && time < 60 * 60 * 24) {
          time =
            parseInt(time / 3600.0) +
            "小时" +
            parseInt(
              (parseFloat(time / 3600.0) - parseInt(time / 3600.0)) * 60
            ) +
            "分钟" +
            parseInt(
              (parseFloat(
                (parseFloat(time / 3600.0) - parseInt(time / 3600.0)) * 60
              ) -
                parseInt(
                  (parseFloat(time / 3600.0) - parseInt(time / 3600.0)) * 60
                )) *
                60
            ) +
            "秒";
        } else if (time >= 60 * 60 * 24) {
          time =
            parseInt(time / 3600.0 / 24) +
            "天" +
            parseInt(
              (parseFloat(time / 3600.0 / 24) - parseInt(time / 3600.0 / 24)) *
                24
            ) +
            "小时" +
            parseInt(
              (parseFloat(time / 3600.0) - parseInt(time / 3600.0)) * 60
            ) +
            "分钟" +
            parseInt(
              (parseFloat(
                (parseFloat(time / 3600.0) - parseInt(time / 3600.0)) * 60
              ) -
                parseInt(
                  (parseFloat(time / 3600.0) - parseInt(time / 3600.0)) * 60
                )) *
                60
            ) +
            "秒";
        } else {
          time = parseInt(time) + "秒";
        }
      }
      this.timelang = time;
    },
    inqBadClick(data) {
      let url;
      this.inqBadType = data;
      if (data == 1) {
        url = api.findDhtbwWxPersonInqBadByServiceId;
        this.inqBadTitle = "不良事件填报";
      } else {
        url = api.findDhtbwWxPersonInqComplaintByServiceId;
        this.inqBadTitle = "患者投诉填报";
      }
      this.loading = true;
      let params = {};
      params.serviceId = this.info.serviceId;
      this.$axios
        .post(url, params)
        .then((resp) => {
          this.inqBadStatus = true;
          if (resp.data.object) {
            this.inqBadMag.content = resp.data.object.content;
            this.inqBadMag.id = resp.data.object.id;
          } else {
            this.inqBadMag.content = null;
            this.inqBadMag.id = null;
          }
          this.loading = false;
        })
        .catch((err) => {
          this.$Message.info("服务器连接超时，请重试");
          this.inqBadStatus = false;
          this.loading = false;
        });
    },
    cancel() {
      this.inqBadStatus = false;
    },
    submitInqBad(name) {
      let params = {};
      params.serviceId = this.info.serviceId;
      params.businessSources = this.info.inqConType;
      params.doctorId = this.info.doctorId;
      params.doctorName = this.info.doctorName;
      params.departmentId = this.info.departmentId;
      params.deptType = this.info.deptType;
      params.deptName = this.info.deptTypeName;
      params.hospitalId = this.info.hospitalid;
      params.hospitalName = this.info.hospitalname;
      this.$refs[name].validate((valid) => {
        if (valid) {
          params.content = this.inqBadMag.content;
          params.id = this.inqBadMag.id;
          this.review(params);
        }
      });
      return false;
    },
    delInqBad() {
      if (!this.inqBadMag.id) {
        this.$Message.info("没有可删除的信息!");
        return;
      }
      let params = {};
      params.id = this.inqBadMag.id;
      let url;
      if (this.inqBadType == 1) {
        url = api.delDhtbwWxPersonInqBadById;
      } else {
        url = api.delDhtbwWxPersonInqComplaintById;
      }
      this.$axios
        .post(url, params)
        .then((resp) => {
          if (resp.data.success) {
            this.$Message.success("删除成功");
            this.inqBadStatus = false;
          } else {
            this.$Message.info("删除失败");
          }
          this.loading = false;
        })
        .catch((err) => {
          this.$Message.info("服务器连接超时，请重试");
          this.inqBadStatus = false;
          this.loading = false;
        });
    },
    review(param) {
      this.loading = true;
      let url;
      if (this.inqBadType == 1) {
        url = api.insertOrUpdateDhtbwWxPersonInqBad;
      } else {
        url = api.insertOrUpdateDhtbwWxPersonInqComplaint;
      }
      this.$axios
        .post(url, param)
        .then((resp) => {
          if (resp.data.success) {
            this.$Message.success("保存成功");
            this.inqBadStatus = false;
          } else {
            this.$Message.info("保存失败");
          }
          this.loading = false;
        })
        .catch((err) => {
          this.$Message.info("服务器连接超时，请重试");
          this.inqBadStatus = false;
          this.loading = false;
        });
    },
  },
};
</script>
<style lang="less" scoped>
.videoBox {
  width: 500px;
  height: 700px;
  position: absolute;
  z-index: 9999999999999;
  margin: auto;
  top: 0px;
  bottom: 0px;
  left: 0px;
  right: 0px;
  background: #f5f7fa;
  .top {
    display: flex;
    justify-content: space-between;

    i {
      margin: 5px 5px 0px 5px;
      color: #919399;
    }
  }
}
.doctorreviewreview {
  padding: 15px 0;
  width: 100%;
  background: #ffffff;
  box-sizing: border-box;
  .title {
    font-size: 20px;
    padding-left: 30px;
    margin-bottom: 20px;
    color: #333;
    height: 40px;
    line-height: 40px;
    background: #ebedf8;
  }
  .main {
    border: 1px solid #f0f0f0;
    height: 750px;
    overflow-y: scroll;
  }
  .box {
    display: flex;
    justify-content: space-between;
  }
  .kongtit {
    padding-left: 70px;
    margin-top: 5px;
    word-break: break-all;
    word-wrap: break-word;
  }
  .lista {
    line-height: 25px;
    font-size: 14px;
    padding-left: 48px;
    .starall {
      img {
        width: 134px;
        height: 22px;
      }
    }
  }
  .tit {
    width: 100%;
    height: 40px;
    color: #333;
    line-height: 40px;
    text-align: center;
    background: #ebedf8;
    z-index: 9;
    position: absolute;
  }
  .bor {
    width: 100%;
    height: 750px;
    background: #fdfdfd;
    overflow-y: hidden;
    padding: 20px 0;
    border: 1.5px solid #f5f5f5;
  }
  .main-content {
    width: 100%;
    height: 95%;
    overflow: auto;
    padding: 0px 0 5px 0;
    margin-bottom: 20px;
    z-index: 1;
    cursor: pointer;
    background: #fdfdfd;
  }
}
.main-scroller {
  overflow: auto;
}
.btn {
  height: 35px;
}
</style>
